<!-- 如果不需要监听变更数据，就在父组件直接使用v-model:field="" -->
<template>
    <div class="">
        <van-field 
            :model-value="field" 
            @update:model-value="emits('update:field', $event)"
            :required="required"
            center
            is-link
            :readonly="true"
            :name="name" 
            :label="label"
            :placeholder="label" 
            :rules="[{ required: required, message: '请选择' + label }]"
            @click="!readonly ? showPicker = true : ''"
        />
        <van-popup 
            v-model:show="showPicker" 
            position="bottom"
            close-on-popstate
            round
        >
            <van-time-picker
                v-model="currentTime"
                title="选择时间"
                :columns-type="columnsType"
                :min-time="minTime"
                :max-time="maxTime"
                @confirm="onConfirm"
                @cancel="showPicker = false"
            />
        </van-popup>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw } from 'vue';
    import type { Ref, Raw } from 'vue'
    // withDefaults(defineProps<{
    //     field?: any,
    //     name?: string,
    //     label?: string,
    //     columns?: any[],
    // }>(), {
    //     field: '',
    //     name: '',
    //     label: '',
    //     columns: () =>[],
    // })
    
    const currentTime: Ref<string[]> = ref([])
    const { field, name, label, minTime='00:00:00', maxTime='23:59:59', columnsType=['hour', 'minute'], readonly=false, required=false } = defineProps<{
        field?: any,
        name?: string,
        label?: string,
        minTime?: any,
        maxTime?: any,
        columnsType?: any,
        readonly?: boolean,
        required?: boolean,
    }>()
    if (field) {
        field.split(':').forEach(item => {
            currentTime.value.push(item)
        })
    } else {
        const date = new Date()
        columnsType.forEach(item => {
            if (item == 'hour') {
                currentTime.value.push(date.getHours().toString())
            } else if (item == 'minute') {
                currentTime.value.push(date.getMinutes().toString())
            }
            else if (item == 'second') {
                currentTime.value.push(date.getSeconds().toString())
            }
        })
    }
    console.log(currentTime)
    const emits = defineEmits<{
        (e: 'update:field', data: any): void,
    }>()
    const showPicker: Ref<boolean> = ref(false)
    
    const onConfirm = ({ selectedValues, selectedOptions }) => {
        console.log(selectedValues)
        console.log(selectedOptions)
        let val = ''
        selectedValues.forEach((item, index) => {
            if (index == 0) {
                val = item
            } else {
                val += ':' + item
            }
        })
        emits('update:field',val)
        showPicker.value = false;
    }
</script>

<style lang="scss" scoped>
    
</style>